<template>
    <div class="big1">
        <div class="big" v-for="(v,i) in this.$store.state.retailers.text" :key="i">
            <div class="img">
                <img :src="v.img" alt="">
            </div>
            <div class="text">
                <div class="top">
                    <span class="h1">{{v.one}}</span>
                    <span class="h2">{{v.two}}</span>
                </div>
                <div class="middle1">
                    <span>{{v.left}}</span>
                    <span>{{v.middle}}</span>
                    <span>{{v.right}}</span>
                </div>
                <div class="middle2">
                    <span>{{v.leftt}}</span>
                    <span>{{v.ringhtt}}</span>
                </div>
                <div class="bottom">
                    <span>{{v.money}}</span>
                    <span>{{v.xiaoliang}}</span>
                </div>
            </div>
        </div>  
    </div>
    
    
</template>

<script>
// import getLink from "@/api/getindex.js"
export default {
// data(){
//     return{
//         arr:[]
//     }
// },
    created(){
    // getLink("/mock/data/retailers").then(res => {
    // this.arr =res.data;
    // })
    this.$store.dispatch("rlink")
}
}

</script>

<style scoped>
    .bottom span:nth-of-type(1){
        color: red;
        font-weight: 600;
        margin-right: 3%;
    }
    .bottom span:nth-of-type(2){
        color: rgb(112, 110, 110);
        font-size: 0.2rem;
    }
    .middle2 span:nth-of-type(1){
        background-color: rgb(243, 91, 91);
        color: red;
        margin-right: 2%;
    }
    .middle2 span:nth-of-type(2){
        background-color: rgb(145, 141, 141);
    }
    .middle2 span{
        border-radius: 0.05rem;
        font-size: 0.2rem;
        padding: 1%;
        
    }
    .middle1 span{
        font-size: 0.2rem;
        color: rgb(166, 168, 20);
    }
    .middle1 span:nth-of-type(1) {
        margin-right: 2%;
    }
    .middle1 span:nth-of-type(3) {
        margin-left: 2%;
    }
    .h1{
        background-color: red;
        border: 1px solid black;
        border-radius: 0.1rem;
        font-size: 0.2rem;
        color: white;
    }
    .h2{
        width: 1rem;
        margin-left: 2%;
        font-size: 0.25rem;
        font-weight: 600;
        /* background-color: aqua */
    }
    .big1{
        width: 100%;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        margin-bottom: 20%;
    }
    .big{
        width: 46%;
        /* background-color: brown; */
    }
    .img{
        /* background-color: aqua; */
        width: 100%;
    }
   img{
       width: 100%;
   }
   .text{
       /* width: 100%; */
       /* background-color: pink; */
       margin:2% 4%;
   }
</style>
